<template>
  <div>
    <el-card v-if="visable" style="">
      <h1 align="center">欢迎使用人脸识别</h1>
      <!-- <p><i class="el-icon-refresh"></i>提示：模型最初校验与重新校验时可能会稍慢，请耐心等候，或刷新界面重启</p> -->
    </el-card>
    <el-card>
      <div id="box">
        <div class="box1">
          <video id="webcam" width="400" height="300" playsinline loop></video>
          <canvas id="face_canvas" width="400" height="300"></canvas>
        </div>
        <div class="box3">
          <h1><i class="el-icon-loading"></i></h1>
        </div>
        <div class="box3">
          <h1><i class="el-icon-loading"></i></h1>
        </div>
        <div class="box2">
          <canvas id="face_model" width="400" height="300"></canvas>
        </div>
      </div>
    </el-card>
    <div v-if="foundFace">
      找到人脸，进行支付方法的调用
    </div>
  </div>
</template>
<script src="../../../assets/js/clmtrackr.js"></script>
<script>
//1. nmp install clmtrackr
//2. 拷贝clmtrackr.js 到 assets/js/clmtrackr.js
//3. index.html 加上
//4. 将assets拷贝到public
import '../../../assets/js/clmtrackr.js';
import { listForm, getForm, delForm, addForm, updateForm, payupdate } from "@/api/order/form";
import { pay } from '../../../api/order/form'
export default {
  name: 'testTracking',
  data() {
    return {
      webcam: '',
      face_canvas: '',
      face_model:'',
      face_canvas_ctx:'',
      face_model_ctx:'',
      ctracker: '',
      visable:true,
      imageBase64:'',
      foundFace:false,

    }
  },
  mounted() {
    this.initWebCam()
  },
  methods: {
    initWebCam() {
      this.webcam = document.getElementById('webcam');
      this.face_canvas = document.getElementById('face_canvas');
      this.face_model = document.getElementById('face_model');
      this.face_canvas_ctx = face_canvas.getContext('2d');
      this.face_model_ctx = face_model.getContext('2d');
      console.log(this.webcam)
      console.log(this.face_canvas)
      this.initClmTrackr();
      this.openCam();
    },
    initClmTrackr() {
      this.ctracker = new clm.tracker();
      this.ctracker.init();
    },
    getUserMedia(constrains, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新标准API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit内核浏览器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
      } else if (navigator.mozGetUserMedia) {
        //Firefox浏览器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constrains).then(success).catch(error);
      } else {
        //this.scanTip = "你的浏览器不支持访问用户媒体设备"
      }
    },
    openCam(){
      //let video = this.webcam;
      this.getUserMedia(
        {video : true}
        , this.onStreaming, this.onStreamingError)
    },
    onStreaming(stream) {
      this.webcam.srcObject = stream;
      //console.log("-->" + this.ctracker);
      this.ctracker.start(this.webcam);
      this.webcam.play();   // 播放
      this.detect();
    },
    onStreamingError(e) {
      console.log("访问用户媒体失败" + e.name + "," + e.message);
    },
    // 持续监测人脸
    detect() {
      // 检查是否检测到人脸
      requestAnimationFrame(this.detect);
      let currentPosition = this.ctracker.getCurrentPosition();
      console.log(currentPosition);
      this.face_canvas_ctx.clearRect(0, 0, 400, 300);
      if (currentPosition) {
        //在overlay canvas上画出检测到的人脸:
        this.ctracker.draw(this.face_canvas);
        if(!this.foundFace){
          this.takephoto();
          this.foundFace = true;
          setTimeout(()=>{
            //alert("--");
            this.foundFace = false;
          },5000);
          this.update();
        }
      }
    },
    takephoto(){
      this.face_model_ctx.drawImage(this.webcam, 0, 0, this.webcam.width, this.webcam.height)
      this.imageBase64 = this.saveAsPNG(this.face_model)
    },
    update() {
      payupdate(this.$route.query.index).then(response => {
        this.$modal.msgSuccess("支付成功");
      });
      this.$router.push({ path: '/order/form' });
    },
    saveAsPNG(c) {
      return c.toDataURL('image/png', 0.3)
    }
  }
}
</script>
<style>/*webcam和canvas标签位置重合使显示出来的人脸模型和视频重合*/
#box {
  width: 100%;
  height: 350px;
  display: flex;
}
.box1 {
  position: relative;
  width: 50%;
  flex: 4;
}
.box3 {
  flex: 1;
  text-align: center;
  line-height: 300px;
}
.box2 {
  position: relative;
  width: 50%;
  flex: 4;
}
#face_canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  border-radius: 20px;
}
#face_model {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #000000;
  border-radius: 20px;
  color: #fff;
  background: #000;
}
#webcam {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #333;
  border-radius: 20px;
  background: #666;
}
</style>
